<template>
  <el-container>
    <el-header height="270px" style="background-color: #F0F8F8; padding: 10px;">
      <el-scrollbar style="height:100%;overflow:hidden">
        <div>
          <div>
            <div class="nameClass" v-html="term.name"></div>
            <div v-for="nameSourceItem of term.nameSource" style="color: #959999;font-size: 10px" v-html="'《' + nameSourceItem.name + '》（' +
          CONST.TERM_SOURCE[nameSourceItem.category] + '）'"></div>
            <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY"
                 v-if="UTIL.isNotEmpty(term[prop]) && term[prop].length > 0">
              <div class="fieldName">{{ propName }}：</div>
              <div v-if="typeof term[prop] === 'string'" class="name-content" v-html="term[prop]"></div>
              <div v-else class="name-content" v-html="UTIL.arrayToStr(term[prop], 'value', ';')"></div>
            </div>
            <hr style="margin-left: 0px; width: 60%;"/>
            <div v-if="UTIL.isNotEmpty(term.explanation) && term.explanation.length > 0">
              <div class="fieldName">释义：</div>
              <div v-for="item in term.explanation" style="margin-top: 15px;">
                <div v-html="item.value"></div>
                <div
                  style="margin-top:5px;margin-bottom:20px;color: #959999;font-size: 10px; width: 65%;text-align: right;">
                  <div class="line vertical-align-top knowledge-source">{{ item.name }} -</div>
                  <div v-if="UTIL.isNotEmpty(item.version)" class="line vertical-align-top knowledge-source">
                    {{ item.version }} -
                  </div>
                  <div class="line vertical-align-top knowledge-source">{{ item.isbn }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-header>
    <br/>
    <el-main style="background-color: #F0F8F8;height:300px;overflow: hidden">
      <span style="font-size: 18px;">更新记录</span>
      <el-scrollbar style="height: 100%;">
        <el-row>
          <el-col :span="8" style="border-right: 1px solid #7D8080;padding: 10px">
            <div style="text-align: center;margin-bottom: 10px">
              <span>入库术语</span>
            </div>
            <div v-for="(term, index) in termConflict">
              <div class="nameClass" v-html="term.name"></div>
              <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY"
                   v-if="UTIL.isNotEmpty(term[prop]) && term[prop].length > 0">
                <div class="fieldName">{{ propName }}：</div>
                <div v-if="typeof term[prop] === 'string'" class="name-content" v-html="term[prop]"></div>
                <div v-else class="name-content" v-html="UTIL.arrayToStr(term[prop], 'value', ';')"></div>
              </div>
              <div v-if="term.explanation.length > 0">
                <div class="fieldName">释义：</div>
                <div v-for="item in term.explanation" style="margin-top: 15px;">
                  <div v-html="item.value"></div>
                  <div style="margin-top:5px;margin-bottom:20px;color: #959999;font-size: 10px; text-align: right;">
                    <div class="line vertical-align-top knowledge-source">{{ item.name }} -</div>
                    <div v-if="UTIL.isNotEmpty(item.version)" class="line vertical-align-top knowledge-source">
                      {{ item.version }} -
                    </div>
                    <div class="line vertical-align-top knowledge-source">{{ item.isbn }}</div>
                  </div>
                </div>
              </div>
              <hr v-if="index < termConflict.length - 1">
            </div>
          </el-col>
          <el-col :span="8" style="border-right: 1px solid #7D8080;padding: 10px">
            <div style="text-align: center;margin-bottom: 10px">
              <span>标准术语</span>
            </div>
            <div v-for="(standard,index) in standardConflict">
              <div class="nameClass" v-html="standard.name"></div>
              <div v-for="nameSourceItem of standard.nameSource" style="color: #959999;font-size: 10px" v-html="'《' + nameSourceItem.name + '》（' +
          CONST.TERM_SOURCE[nameSourceItem.category] + '）'"></div>
              <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY"
                   v-if="UTIL.isNotEmpty(standard[prop]) && standard[prop].length > 0">
                <div class="fieldName">{{ propName }}：</div>
                <div v-if="typeof standard[prop] === 'string'" class="name-content" v-html="standard[prop]"></div>
                <div v-else class="name-content" v-html="UTIL.arrayToStr(standard[prop], 'value', ';')"></div>
              </div>
              <div v-if="term.explanation.length > 0">
                <div class="fieldName">释义：</div>
                <div v-for="item in standard.explanation" style="margin-top: 15px;">
                  <div v-html="item.value"></div>
                  <div style="margin-top:5px;margin-bottom:20px;color: #959999;font-size: 10px; text-align: right;">
                    <div class="line vertical-align-top knowledge-source">{{ item.name }} -</div>
                    <div v-if="UTIL.isNotEmpty(item.version)" class="line vertical-align-top knowledge-source">
                      {{ item.version }} -
                    </div>
                    <div class="line vertical-align-top knowledge-source">{{ item.isbn }}</div>
                  </div>
                </div>
              </div>
              <hr v-if="index < standardConflict.length - 1">
            </div>
          </el-col>
          <el-col :span="8" style="border-right: 1px solid #7D8080;padding: 10px">
            <div style="text-align: center;margin-bottom: 10px">
              <span>冲突结果</span>
            </div>
            <div v-for="(termItem,index) in mergedTermList">
              <div :style="{color:(term.name === termItem.name ? 'red' : 'black')}" class="nameClass"
                   v-html="termItem.name"></div>
              <div v-for="nameSourceItem of termItem.nameSource" style="color: #959999;font-size: 10px" v-html="'《' + nameSourceItem.name + '》（' +
          CONST.TERM_SOURCE[nameSourceItem.category] + '）'"></div>
              <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY"
                   v-if="UTIL.isNotEmpty(termItem[prop]) && termItem[prop].length > 0">
                <div class="fieldName">{{ propName }}：</div>
                <div v-if="typeof termItem[prop] === 'string'" class="name-content" v-html="termItem[prop]"></div>
                <div v-else class="name-content" v-html="UTIL.arrayToStr(termItem[prop], 'value', ';')"></div>
              </div>
              <div v-if="termItem.explanation.length > 0">
                <div class="fieldName">释义：</div>
                <div v-for="item in termItem.explanation" style="margin-top: 15px;">
                  <div v-html="item.value"></div>
                  <div style="margin-top:5px;margin-bottom:20px;color: #959999;font-size: 10px; text-align: right;">
                    <div class="line vertical-align-top knowledge-source">{{ item.name }} -</div>
                    <div v-if="UTIL.isNotEmpty(item.version)" class="line vertical-align-top knowledge-source">
                      {{ item.version }} -
                    </div>
                    <div class="line vertical-align-top knowledge-source">{{ item.isbn }}</div>
                  </div>
                </div>
              </div>
              <hr v-if="index < mergedTermList.length - 1"/>
            </div>
          </el-col>
        </el-row>
      </el-scrollbar>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "TermConflictUpdate",
  props: {
    id: String,
    list: Array
  },
  data() {
    return {
      term: {},
      termConflict: [],
      standardConflict: [],
      mergedTermList: [],
      isFixedTop: false
    }
  },
  methods: {
    loadContent(standardId, term) {
      this.axios.get("/pmph/action/term/selectConflictCreateTable", {
        params: {
          id: standardId
        }
      }).then(response => {
        this.termConflict = response.data.filter(item => (item.version === term.version && item.termType === 0))
        this.standardConflict = response.data.filter(item => (item.version === term.version && item.termType === 1))
        this.mergedTermList = response.data.filter(item => (item.version === term.version &&
          (item.termType === 2 || item.termType === 3)))
      })
    }
  },
  mounted() {
    this.term = this.list.find(item => item.id === this.id)
    this.loadContent(this.list[0].standardId, this.term);
  },
  watch: {
    id() {
      this.term = this.list.find(item => item.id === this.id)
      this.loadContent(this.list[0].standardId, this.term)
    }
  }
}
</script>

<style scoped>
.name-content {
  font-size: 16px;
  display: inline-block;
}

.nameClass {
  font-size: 16px;
  font-weight: bold;
}

.fieldName {
  font-family: MicrosoftYaHei-Bold, sans-serif;
  font-size: 16px;
  display: inline-block;
  margin-top: 15px;
}

.el-scrollbar__wrap {
  overflow-x: hidden;
}

.line {
  display: inline-block;
}

.vertical-align-top {
  vertical-align: top;
}

.knowledge-source {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 12px;
  color: #666666;
  letter-spacing: 0;
}

/deep/ .el-scrollbar__wrap {
  overflow: auto;
}

.knowledge-source-input {
  width: 20%;
}
</style>
